<template>
  <view class="category">

    <js-lang title="home.title" :showBtn="true"></js-lang>
    <u-swiper :height="300" :list="imgList" :title="false" @click="imgListClick"></u-swiper>
    <view class="toolbar u-m-b-20">
      <u-grid class="grid" :col="3" :border="false">
        <u-grid-item :index="0" @click="navTo('/pages/bpm/myTaskTodo')">
          <u-badge :count="todoCount"></u-badge>
          <u-icon class="grid-icon" name="clock" :size="80" :style="{ color: '#ea9a44' }"></u-icon>
          <view class="grid-text">待办任务</view>
        </u-grid-item>
        <u-grid-item :index="1" @click="navTo('/pages/bpm/myTaskHistory')">
          <u-icon class="grid-icon" name="checkmark-circle" :size="80" :style="{ color: '#47cb66' }"></u-icon>
          <view class="grid-text">已办任务</view>
        </u-grid-item>
        <u-grid-item :index="2" @click="navTo('/pages/bpm/myRuntime')">
          <u-icon class="grid-icon" name="order" :size="80" :style="{ color: '#5a98ea' }"></u-icon>
          <view class="grid-text">我相关的</view>
        </u-grid-item>
      </u-grid>
    </view>

    <u-collapse class="box u-p-b-5" :accordion="false" :arrow="true">
      <view class="item" v-for="(menu, index) in menuList" :key="menu.menuCode">
        <u-collapse-item :open="true">
          <view class="title" slot="title">
            <u-icon :name="menu.menuIcon != '' ? menu.menuIcon : 'home'" :size="40"
                    :style="{ color: menu.menuColor != '' ? menu.menuColor : '#666' }"></u-icon>
            <view class="text" :style="{ color: menu.menuColor != '' ? menu.menuColor : '#666' }"
            >{{menu.menuName}}</view>
          </view>
          <u-grid class="grid u-m-t-20" :col="3" :border="false">
            <u-grid-item v-for="(child, index2) in menu.childList" :key="child.menuCode" @click="navTo(child.url)">
              <u-icon class="grid-icon" :name="child.menuIcon != '' ? child.menuIcon : 'order'" :size="80"
                      :style="{ color: child.menuColor != '' ? child.menuColor : '#666' }"></u-icon>
              <view class="grid-text" :style="{ color: child.menuColor != '' ? child.menuColor : '#666' }"
              >{{child.menuName}}</view>
            </u-grid-item>
          </u-grid>
        </u-collapse-item>
      </view>
    </u-collapse>


    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search" @tap="toSearchPage">
        <view class="icon">
          <image src="/static/images/search.png" />
        </view>
        <view class="text">搜索您想购买的商品或者店铺</view>
      </view>
    </view>
    <!-- 内容区 -->
    <view class="main">
      <!-- 左侧内容 -->
      <view class="first-menu">
        <block v-for="(firstCategory, index) in firstCategoryList" :key="index">
          <view class="item" :class="{active:selectedIndex===index}" :data-index="index" @tap="switchCategory">{{ firstCategory.name }}</view>
        </block>
      </view>
      <!-- 右侧内容 -->
      <view class="subclass">
        <view v-if="firstCategoryList.length" class="adv-img">
          <image :src="firstCategoryList[selectedIndex].imgUrl" />
        </view>
        <block v-for="(secondCategory, index) in secondCategoryList" :key="index">
          <view class="sub-con">
            <view class="second-menu">{{ secondCategory.name }}</view>
            <view class="third-menu">
              <block v-for="(thirdCategory, subIndex) in secondCategory.categories" :key="subIndex">
                <view class="item" :data-categoryid="thirdCategory.categoryId" :data-name="thirdCategory.name" @tap="toSearchListPage">
                  <view class="img">
                    <image :src="thirdCategory.imgUrl" />
                  </view>
                  <view class="text">{{ thirdCategory.name }}</view>
                </view>
              </block>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
const http = require('../../utils/http.js')
const cartCount = require('../../utils/cart-count.js')

export default {
  data() {
    return {
      selectedIndex: 0, // 选中的分类项(默认为第一个分类)
      firstCategoryList: [], // 一级分类内容(一级分类下的categories为二级分类)
      secondCategoryList: [], // 二级分类内容(二级分类下的categories为三级分类)

      imgList: [
        {image: '/static/jeesite/banner/1.svg'},
        {image: '/static/jeesite/banner/2.svg'},
        {image: '/static/jeesite/banner/3.svg'}
      ],

      todoCount: 0,

      menuList: [
        {
          menuCode: 'a-1',
          menuName: '增删改查',
          menuIcon: 'file-text',
          menuColor: '',
          url: '',
          childList: [
            {
              menuCode: 'a13',
              menuName: '列表',
              menuIcon: 'thumb-up',
              menuColor: '',
              url: '/pages/testData/index',
            },
            {
              menuCode: 'a11',
              menuName: '新增',
              menuIcon: 'plus-circle',
              menuColor: '',
              url: '/pages/testData/form',
            },
            {
              menuCode: 'a10',
              menuName: '请假',
              menuIcon: 'calendar',
              menuColor: '',
              url: '/pages/oa/oaLeave/index',
            },
          ]
        },
        {
          menuCode: 'a',
          menuName: '公文管理',
          menuIcon: 'home',
          menuColor: '#919328',
          url: '',
          childList: [
            {
              menuCode: 'a1',
              menuName: '收文',
              menuIcon: 'email',
              menuColor: '#919328',
              url: '/pages/testData/form',
            },
            {
              menuCode: 'a2',
              menuName: '发文',
              menuIcon: 'bookmark',
              menuColor: '#919328',
              url: '/pages/testData/form',
            },
            {
              menuCode: 'a3',
              menuName: '查询',
              menuIcon: 'search',
              menuColor: '#919328',
              url: '/pages/testData/index',
            }
          ]
        },
        {
          menuCode: 'a-2',
          menuName: '功能列表',
          menuIcon: '',
          menuColor: '#0d9311',
          url: '',
          childList: [
            {
              menuCode: 'a21',
              menuName: '找回密码',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/login/forget',
            },
            {
              menuCode: 'a22',
              menuName: '注册用户',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/login/reg',
            },
            {
              menuCode: 'a23',
              menuName: '个人资料',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/user/info',
            },{
              menuCode: 'a24',
              menuName: '关于我们',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/user/about',
            },
            {
              menuCode: 'a25',
              menuName: '修改密码',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/user/pwd',
            },
            {
              menuCode: 'a26',
              menuName: '意见反馈',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/user/comment',
            },
            {
              menuCode: 'a27',
              menuName: '系统设置',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/sys/user/setting',
            },
            {
              menuCode: 'a28',
              menuName: '列表演示',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/testData/index',
            },
            {
              menuCode: 'a29',
              menuName: '表单演示',
              menuIcon: '',
              menuColor: '#0d9311',
              url: '/pages/testData/form',
            }
          ]
        },
      ],
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getPlatformCategoryList()
  },

  /**
   * 生命周期函数--监听页面
   */
  onShow: function() {
    this.refreshCount();
    // 获取购物车数字
    cartCount.getCartCount()
  },

  methods: {

    navTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    refreshCount() {
      this.todoCount = 3;
    },
    imgListClick(index) {
      console.log(`点击了第${index + 1}页图片`)
    },
    itemClick(index) {
      console.log(index);
    },

    /**
     * 获取平台分类(直接得到1、2、3级的分类)
     */
    getPlatformCategoryList() {
      uni.showLoading()
      const params = {
        url: '/exchange_product/ua/category/shop_category_list',
        method: 'GET',
        data: {
          shopId: 0,
          parentId: 0
        },
        callBack: res => {
          if (!res) {
            return uni.hideLoading()
          }
          this.firstCategoryList = res
          // 默认选择: 第一个一级分类
          this.secondCategoryList = this.firstCategoryList[0].categories
          uni.hideLoading()
        }
      }
      http.request(params)
    },

    /**
     * 切换分类，改变二级分类内容
     */
    switchCategory(e) {
      const index = parseInt(e.currentTarget.dataset.index)
      this.selectedIndex = index
      this.secondCategoryList = this.firstCategoryList[index].categories
    },

    /**
     * 跳转到搜索页
     */
    toSearchPage() {
      uni.navigateTo({
        url: '/pages/search-page/search-page'
      })
    },

    /**
     * 跳转到商品列表页
     */
    toSearchListPage(e) {
      const categoryId = parseInt(e.currentTarget.dataset.categoryid)
      const keyword = e.currentTarget.dataset.name
      uni.navigateTo({
        url: '/pages/search-list/search-list?categoryId=' + categoryId + '&keyword=' + keyword
      })
    }
  }
}
</script>

<style>
@import "./category.css";

page {
  background-color: #f8f8f8;
}
</style>
